<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DJF Flowable 企业级工作流管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .content {
            padding: 30px;
        }

        .section {
            margin-bottom: 40px;
        }

        .section h2 {
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4facfe;
        }

        .button-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

        .btn-success {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
        }

        .btn-warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .btn-info {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .result-box {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            max-height: 400px;
            overflow-y: auto;
        }

        .result-box pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }

        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-success {
            background-color: #28a745;
        }

        .status-error {
            background-color: #dc3545;
        }

        .status-info {
            background-color: #17a2b8;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .feature-card {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            border-left: 4px solid #4facfe;
        }

        .feature-card h3 {
            color: #333;
            margin-bottom: 15px;
        }

        .feature-card ul {
            list-style: none;
            padding-left: 0;
        }

        .feature-card li {
            padding: 5px 0;
            color: #666;
        }

        .feature-card li:before {
            content: "✓";
            color: #28a745;
            font-weight: bold;
            margin-right: 10px;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #4facfe;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .api-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }

        .api-endpoint {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            border-left: 4px solid #4facfe;
        }

        .method {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            color: white;
            font-size: 12px;
            font-weight: bold;
            margin-right: 10px;
        }

        .method-get { background: #28a745; }
        .method-post { background: #007bff; }
        .method-put { background: #ffc107; color: #333; }
        .method-delete { background: #dc3545; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 DJF Flowable 工作流管理系统</h1>
            <p>企业级业务流程管理平台 - 基于 Flowable 7.0.1 + Spring Boot 3.4.8</p>
        </div>

        <div class="content">
            <!-- 系统状态检查 -->
            <div class="section">
                <h2>📊 系统状态</h2>
                <div class="button-grid">
                    <button class="btn btn-info" onclick="checkHealth()">健康检查</button>
                    <button class="btn btn-info" onclick="getSystemInfo()">系统信息</button>
                    <button class="btn btn-info" onclick="getProcessDefinitions()">流程定义列表</button>
                </div>
            </div>

            <!-- 快速测试 -->
            <div class="section">
                <h2>🧪 快速测试</h2>
                <div class="button-grid">
                    <button class="btn btn-success" onclick="quickLeaveTest()">启动请假流程</button>
                    <button class="btn btn-warning" onclick="managerApproval(true)">领导审批通过</button>
                    <button class="btn btn-warning" onclick="managerApproval(false)">领导审批拒绝</button>
                    <button class="btn btn-warning" onclick="hrApproval(true)">HR审批通过</button>
                </div>
            </div>

            <!-- 任务管理 -->
            <div class="section">
                <h2>📋 任务管理</h2>
                <div class="button-grid">
                    <button class="btn" onclick="getTodoTasks('employee001')">员工待办任务</button>
                    <button class="btn" onclick="getCandidateTasks('manager001')">领导候选任务</button>
                    <button class="btn" onclick="getCandidateTasks('hr001')">HR候选任务</button>
                </div>
            </div>

            <!-- 加载指示器 -->
            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>正在处理请求...</p>
            </div>

            <!-- 结果显示 -->
            <div class="result-box" id="result" style="display: none;">
                <pre id="result-content"></pre>
            </div>

            <!-- 功能特性 -->
            <div class="section">
                <h2>✨ 功能特性</h2>
                <div class="feature-grid">
                    <div class="feature-card">
                        <h3>🔄 流程管理</h3>
                        <ul>
                            <li>流程定义部署</li>
                            <li>流程实例启动</li>
                            <li>流程监控管理</li>
                            <li>流程历史查询</li>
                        </ul>
                    </div>
                    <div class="feature-card">
                        <h3>📝 任务处理</h3>
                        <ul>
                            <li>待办任务查询</li>
                            <li>候选任务认领</li>
                            <li>任务委派转办</li>
                            <li>任务审批完成</li>
                        </ul>
                    </div>
                    <div class="feature-card">
                        <h3>🔔 通知服务</h3>
                        <ul>
                            <li>邮件通知发送</li>
                            <li>短信通知集成</li>
                            <li>审批结果通知</li>
                            <li>流程状态提醒</li>
                        </ul>
                    </div>
                    <div class="feature-card">
                        <h3>🛡️ 安全控制</h3>
                        <ul>
                            <li>用户身份认证</li>
                            <li>权限角色管理</li>
                            <li>数据安全保护</li>
                            <li>操作日志记录</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- API文档 -->
            <div class="section">
                <h2>📚 API 接口文档</h2>
                <div class="api-section">
                    <div class="api-endpoint">
                        <span class="method method-get">GET</span>
                        <strong>/api/test/health</strong> - 健康检查
                    </div>
                    <div class="api-endpoint">
                        <span class="method method-get">GET</span>
                        <strong>/api/test/system-info</strong> - 系统信息
                    </div>
                    <div class="api-endpoint">
                        <span class="method method-post">POST</span>
                        <strong>/api/flowable/start</strong> - 启动流程实例
                    </div>
                    <div class="api-endpoint">
                        <span class="method method-post">POST</span>
                        <strong>/api/flowable/complete-task</strong> - 完成任务
                    </div>
                    <div class="api-endpoint">
                        <span class="method method-get">GET</span>
                        <strong>/api/flowable/todo-tasks/{userId}</strong> - 查询待办任务
                    </div>
                    <div class="api-endpoint">
                        <span class="method method-get">GET</span>
                        <strong>/api/flowable/process-definitions</strong> - 流程定义列表
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const API_BASE = '/flowable/api';

        function showLoading() {
            document.getElementById('loading').style.display = 'block';
            document.getElementById('result').style.display = 'none';
        }

        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
        }

        function showResult(data, isSuccess = true) {
            hideLoading();
            const resultDiv = document.getElementById('result');
            const resultContent = document.getElementById('result-content');
            
            resultContent.textContent = JSON.stringify(data, null, 2);
            resultDiv.style.display = 'block';
            resultDiv.style.borderLeft = isSuccess ? '4px solid #28a745' : '4px solid #dc3545';
        }

        async function makeRequest(url, options = {}) {
            showLoading();
            try {
                const response = await fetch(API_BASE + url, {
                    headers: {
                        'Content-Type': 'application/json',
                        ...options.headers
                    },
                    ...options
                });
                const data = await response.json();
                showResult(data, response.ok);
                return data;
            } catch (error) {
                showResult({ error: error.message }, false);
                console.error('Request failed:', error);
            }
        }

        // 健康检查
        function checkHealth() {
            makeRequest('/test/health');
        }

        // 系统信息
        function getSystemInfo() {
            makeRequest('/test/system-info');
        }

        // 流程定义列表
        function getProcessDefinitions() {
            makeRequest('/flowable/process-definitions');
        }

        // 快速测试请假流程
        function quickLeaveTest() {
            makeRequest('/test/quick-leave-test', { method: 'POST' });
        }

        // 领导审批
        function managerApproval(approve) {
            makeRequest(`/test/manager-approval?approve=${approve}`, { method: 'POST' });
        }

        // HR审批
        function hrApproval(approve) {
            makeRequest(`/test/hr-approval?approve=${approve}`, { method: 'POST' });
        }

        // 查询待办任务
        function getTodoTasks(userId) {
            makeRequest(`/flowable/todo-tasks/${userId}`);
        }

        // 查询候选任务
        function getCandidateTasks(userId) {
            makeRequest(`/flowable/candidate-tasks/${userId}`);
        }

        // 页面加载完成后自动检查健康状态
        window.addEventListener('load', function() {
            setTimeout(checkHealth, 1000);
        });
    </script>
</body>
</html>